<template>
	<div>
		<div>
			<div class="list-info-template col-md-6">
				<div class="title">
					<select id="projectList" style="100%" multiple="multiple" placeholder="请选择统计项目">
						<option v-for="(item, index) in projectList" :value="item.id">{{item.projectName}}</option>
					</select>
				</div>
				<div class='time'>
					<input type="text" name="date" @click="openPicker" placeholder="请选择统计日期" v-model="chooseDay" readonly style="height: 40px;">
					<mt-datetime-picker ref="picker" type="date"
						year-format="{value} 年"
						month-format="{value} 月"
						date-format="{value} 日"
						v-model="pickerValue" 
						@confirm="handleConfirm">
					</mt-datetime-picker>
				</div>
			</div>
		</div>
		<nav class="nav" style="height: 40px;">
			<ul>
				<li class="active" style="height: 25px;" id="nav_1" v-on:click="chooseTab(1)">
					<div class="nav-title font-lg" style='font-size:14px;'>项目级统计</div>
				</li>
				<li id="nav_2" style="height: 25px;" v-on:click="chooseTab(2)" v-show="oaUserData.flag">
					<div class="nav-title font-lg" style='font-size:14px;'>公司级统计</div>
				</li>
			</ul>
		</nav>
		<div class="sales-table_daily" style="min-height: 200px;">
			<div class="" style="display: block;">
				<div id="fixed-table-container" class="fixed-table-container">
					<table>
						<tbody id="" v-for="(item, index) in reportList">
							<tr v-if="null == item.projectName ? false: true" >
								<th table-data="项目名称" colspan="4" style="text-align: left; font-size: 14px; font-weight: bold; background-color: #40A0A4; color: white;">{{ item.projectName == null ? '':item.projectName  }}</th>
							</tr>
							<tr>
								<td style="text-align: left;" table-data="统计项">统计项</td>
								<td style="text-align: center;" table-data="今日">今日</td>
								<td style="text-align: center;" table-data="月度">月度</td>
								<td style="text-align: center;" table-data="年度" >年度</td>
							</tr>
							<tr>
								<td style="text-align: left;" table-data="认购">认购</td>
								<td style="text-align: right;" table-data="日认购金">{{ item.subscribeReportDto? item.subscribeReportDto.subDayAmount : 0 }}</td>
								<td style="text-align: right;" table-data="月认购金" >{{ item.subscribeReportDto? item.subscribeReportDto.subMonthAmount : 0 }}</td>
								<td style="text-align: right;" table-data="年认购金">{{ item.subscribeReportDto? item.subscribeReportDto.subYearAmount : 0 }}</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="签约">签约</td>
								<td style="text-align: right;" table-data="日签约金">{{ item.signedReportDto ? item.signedReportDto.signDayAmount : 0 }}</td>
								<td style="text-align: right;" table-data="月签约金" >{{ item.signedReportDto ? item.signedReportDto.signMonthAmount : 0 }}</td>
								<td style="text-align: right;" table-data="年签约金">{{ item.signedReportDto ? item.signedReportDto.signYearAmount : 0 }}</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="签约完成率">签约完成率</td>
								<td style="text-align: right;" table-data="日签约完成率"></td>
								<td style="text-align: right;" table-data="月签约完成率" >{{item.signedReportDto ? item.signedReportDto.signMonthAmountRate : 0 }}%</td>
								<td style="text-align: right;" table-data="年签约完成率">{{item.signedReportDto ? item.signedReportDto.signYearAmountRate : 0 }}%</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="回款">回款</td>
								<td style="text-align: right;" table-data="日回款金">{{ item.receivedReportDto ? item.receivedReportDto.receiveDayAmount : 0 }}</td>
								<td style="text-align: right;" table-data="月回款金" >{{ item.receivedReportDto ? item.receivedReportDto.receiveMonthAmount : 0 }}</td>
								<td style="text-align: right;" table-data="年回款金">{{ item.receivedReportDto ? item.receivedReportDto.receiveYearAmount : 0 }}</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="回款完成率">回款完成率</td>
								<td style="text-align: right;" table-data="日回款完成率"></td>
								<td style="text-align: right;" table-data="月回款完成率" >{{ item.receivedReportDto ? item.receivedReportDto.receiveMonthAmountRate : 0 }}%</td>
								<td style="text-align: right;" table-data="年回款完成率">{{ item.receivedReportDto ? item.receivedReportDto.receiveYearAmountRate : 0 }}%</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="首次来电">首次来电</td>
								<td style="text-align: right;" table-data="日首次来电">{{ item.callReportDto?item.callReportDto.callDayCount : 0 }}</td>
								<td style="text-align: right;" table-data="月首次来电" >{{ item.callReportDto?item.callReportDto.callMonthCount : 0 }}</td>
								<td style="text-align: right;" table-data="年首次来电">{{ item.callReportDto?item.callReportDto.callYearCount : 0 }}</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="首次来访">首次来访</td>
								<td style="text-align: right;" table-data="日首次来访">{{ item.visitReportDto?item.visitReportDto.visitDayCount : 0 }}</td>
								<td style="text-align: right;" table-data="月首次来访" >{{ item.visitReportDto?item.visitReportDto.visitMonthCount : 0 }}</td>
								<td style="text-align: right;" table-data="年首次来访">{{ item.visitReportDto?item.visitReportDto.visitMonthCount : 0 }}</td>
							</tr>
							<tr >
								<td style="text-align: left;" table-data="老访跟进">老访跟进</td>
								<td style="text-align: right;" table-data="日老访跟进">{{ item.oldVisitReportDto?item.oldVisitReportDto.oldVisitDayCount : 0 }}</td>
								<td style="text-align: right;" table-data="月老访跟进" >{{ item.oldVisitReportDto?item.oldVisitReportDto.oldVisitDayCount : 0 }}</td>
								<td style="text-align: right;" table-data="年老访跟进">{{ item.oldVisitReportDto?item.oldVisitReportDto.oldVisitDayCount : 0 }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>
<style>
	@import url("../../assets/css/multiple-select.css");
	td,th{
		font-size: 14px;
	}
	.user-define li {
		padding: 0px;
		margin: 0px;
	}
	.fixed-table-container th, .fixed-table-container td{
		    padding: 2px 4px;
	}
</style>

<script>
	import swiper from '../../assets/js/multiple-select.js'
	import { DatetimePicker, Picker } from 'mint-ui'
	export default {
		data() {
			return {
				oaUserData: {},
				pickerValue: new Date(),
				chooseDay: '',
				year: '',
				month: '',
				day: '',
				tabIndex: 1,
				chooseProjectIds: [],
				reportList: [],
				projectList: []
			}
		},
		watch:{
			chooseProjectIds:{
				handler(newValue,oldValue){
					var _self = this;
					var chooseProjectIds = _self.chooseProjectIds;
					var chooseDay = _self.chooseDay;
					var tabIndex = _self.tabIndex;
					if(chooseProjectIds && chooseProjectIds.length > 0 && chooseDay){
						if(tabIndex == 1){
							_self.getDailyReportReport();
						}else if(tabIndex == 2){
							_self.getWholeReportReport();
						}
					}
				},
				deep:true
			},
			chooseDay: {
				handler(newValue,oldValue){
					var _self = this;
					var chooseProjectIds = _self.chooseProjectIds;
					var chooseDay = _self.chooseDay;
					var tabIndex = _self.tabIndex;
					if(chooseProjectIds && chooseProjectIds.length > 0 && chooseDay){
						if(tabIndex == 1){
							_self.getDailyReportReport();
						}else if(tabIndex == 2){
							_self.getWholeReportReport();
						}
					}
				},
				deep:true
			}
　　　　},
		mounted: function() {
			let _self = this;
			_self.initUserData();
			let year = _self.pickerValue.getFullYear();
			let month = _self.pickerValue.getMonth() + 1;
			if(month < 10){
				month = "0" + month;
			}
			let day = _self.pickerValue.getDate();
			let chooseDay = year + "-" + month + "-" + day
			_self.chooseDay = chooseDay;
			_self.year = chooseDay.substring(0,4);
			_self.month = _self.year + '-' + chooseDay.substring(5,7);
			_self.day = _self.month + '-' + chooseDay.substring(8);
		},
		methods: {
			formatNumber: function(value) {
				if(value != null && value != "") {
					return value.toFixed(2);
				}
				return 0;
			},
			chooseTab: function(tabIndex){
				var navList = $(".nav li");
				for(var i = 0; i < navList.length; i++) {
					navList.eq(i).removeClass("active");
				}
				$("#nav_" + tabIndex).addClass("active");

				var _self = this;
				_self.tabIndex = tabIndex;
				var chooseProjectIds = _self.chooseProjectIds;
				var chooseDay = _self.chooseDay;
				if(chooseProjectIds && chooseDay){
					if(tabIndex == 1){
						_self.getDailyReportReport();
					}else if(tabIndex == 2){
						_self.getWholeReportReport();
					}
				}
				
			},
			initUserData: function(){
				document.setTitle("销售报表");
				var loadIndex = layer.load(1, {
					shade: false
				});
				var _self = this;
				const query = getQueryString()
				var url = _self.utilHelper.apiUrl + "/marketing/dailySellReport/queryOaUserData";
				var params = {
					userId: query.userid,
					userticket: query.userticket
					
				};
				console.log(params);
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					if(!body.success) {
						layer.alert("用户加载失败!");
					} else {
						var entityBody = body.entity;
						_self.oaUserData = entityBody;
						_self.initProjectList(entityBody.user.id);
					}
					layer.close(loadIndex);
				});
			},
			initProjectList: function(userId) {
				var loadIndex = layer.load(1, {
					shade: false
				});
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/marketing/dailySellReport/queryOaProject";
				var params = {
					userId: userId
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					if(!body.success) {
						layer.alert("项目加载失败!");
					} else {
						var entityBody = body.entity;
						var html = "";
						_self.projectList = entityBody;
						//渲染完成后再加载下拉框
						_self.$nextTick(() => {
							_self.initMultiple();
						});
						
					}
					layer.close(loadIndex);
				});
			},
			getDailyReportReport: function() {
				var loadIndex = layer.load(1, {
					shade: false
				});
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/marketing/dailySellReport/projectDailySell";
				var params = {
					projectIds: _self.chooseProjectIds,
					day: _self.day,
					month: _self.month,
					year: _self.year
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					if(body.res != 1) {
						layer.alert("项目级数据加载失败!");
					} else {
						var entityBody = body.obj;
						_self.reportList = entityBody;
					}
					layer.close(loadIndex);
				});
			},
			getWholeReportReport: function() {
				var loadIndex = layer.load(1, {
					shade: false
				});
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/marketing/dailySellReport/projectWholeSell";
				var params = {
					projectIds: _self.chooseProjectIds,
					day: _self.day,
					month: _self.month,
					year: _self.year
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					if(body.res != 1) {
						layer.alert("公司级数据加载失败!");
					} else {
						var entityBody = body.obj;
						_self.reportList = entityBody;
					}
					layer.close(loadIndex);
				});
			},
			//初始化多选下拉框
			initMultiple() {
				var _self = this;
				$("#projectList").multipleSelect({
					filter: false,
					placeholder: "<font style='color: white; font-weight: 600'>请选择统计项目</font>",
					selectAllText: "全选",
					onClick: function(){
						let projectIds = $("#projectList").multipleSelect("getSelects");
						_self.chooseProjectIds = projectIds.join(",");
					},
					onCheckAll: function(){
						let projectIds = $("#projectList").multipleSelect("getSelects");
						_self.chooseProjectIds = projectIds.join(",");
					}
				});
			},
			//打开时间控件id="start_date"
			openPicker() {
				this.$refs.picker.open();
			},
			handleConfirm(e) {
				var _self = this;
				var date = new Date(e);
		    	var chooseDay = date.getFullYear() +
		    		"-"+ _self.fomrtDate(date.getMonth() + 1) +
		    		"-"+ _self.fomrtDate(date.getDate());
				_self.chooseDay = chooseDay
				_self.year = chooseDay.substring(0,4);
				_self.month = _self.year + '-' + chooseDay.substring(5,7);
				_self.day = _self.month + '-' + chooseDay.substring(8);
		    },
		    fomrtDate(n) {
            	return n >= 10 ? n : "0" + n;
            }
		}
		
	}

//获取当前页面url入参
function getQueryString() {
  const string = location.search
  if (string.indexOf('?') !== -1) {
    const arr = string.slice(1).split('&')
    let obj = {}
    arr.map(el => {
      let key = el.split("=")[0]
      let value = el.split("=")[1]
      obj[key] = value
    })
    return obj
  } else return {}
}
</script>
<style>
.list-info-template{
	padding-left:0;
	padding-right:0;
}
.title{
	background:#F07717;
}
.ms-parent{
	display:block;
	margin:0 auto;
	width:100% !important;
	height: 40px;
}
.ms-parent button{
	width:100%;
	background:#F07717;
	text-align:center;
	border: none;
	color:#fff;
}

.ms-choice > span{
	top: 10px;
}

.time input{
	width:100%;
	text-align: center;
	height:2em;
}
.bottom input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.sales-table_daily{
	background-color: #fff;
    padding: 0.45rem 0.45rem 1.2rem;
}

.fixed-table-container {
  box-sizing: border-box;
  min-height: 200px;
  border: 1px solid #ccc;
  margin-bottom: 40px;
}
</style>
